<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机首页样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      /* 基础颜色变量 */
      --primary: #4F46E5;
      --secondary: #EC4899;
      --accent: #F59E0B;
      --success: #10B981;
      --dark: #1F2937;
      --light: #F9FAFB;
      --white: #FFFFFF;
      --gray: #6B7280;
      --light-gray: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      
      /* 主题1 */
      --theme1-primary: #4F46E5;
      --theme1-bg: #F5F3FF;
      
      /* 主题2 */
      --theme2-primary: #EC4899;
      --theme2-bg: #FEF2F2;
      
      /* 主题3 */
      --theme3-primary: #0EA5E9;
      --theme3-bg: #F0F9FF;
      
      /* 主题4 */
      --theme4-primary: #10B981;
      --theme4-bg: #F0FDF4;
      
      /* 主题5 */
      --theme5-primary: #F59E0B;
      --theme5-bg: #FFFBEB;
      
      /* 主题6 */
      --theme6-primary: #1F2937;
      --theme6-bg: #F3F4F6;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    
    /* 首页容器 */
    .home-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .home-page.active {
      display: flex;
      animation: fadeIn 0.5s ease;
    }
    
    /* 导航栏样式 */
    .navbar {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--light-gray);
      position: relative;
      z-index: 10;
    }
    
    .logo {
      font-size: 20px;
      font-weight: 700;
      color: var(--primary);
    }
    
    .nav-icons {
      display: flex;
      gap: 18px;
    }
    
    .nav-icon {
      font-size: 20px;
      color: var(--dark);
      cursor: pointer;
      position: relative;
    }
    
    .nav-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: var(--secondary);
      color: white;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 底部导航 */
    .bottom-nav {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      border-top: 1px solid var(--light-gray);
      background-color: var(--white);
    }
    
    .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--gray);
      font-size: 10px;
      gap: 4px;
      width: 25%;
    }
    
    .bottom-nav-item.active {
      color: var(--primary);
    }
    
    .bottom-nav-icon {
      font-size: 20px;
    }
    
    /* 内容区域 */
    .content {
      flex: 1;
      overflow-y: auto;
      padding-bottom: 60px; /* 为底部导航留出空间 */
    }
    
    /* 故事/动态流 */
    .stories {
      padding: 12px 16px;
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid var(--light-gray);
    }
    
    .stories::-webkit-scrollbar {
      display: none;
    }
    
    .story {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 60px;
    }
    
    .story-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 6px;
      border: 2px solid var(--primary);
      position: relative;
    }
    
    .story-avatar.add {
      background-color: var(--light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--primary);
    }
    
    .story-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .story-name {
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
    }
    
    /* 帖子卡片 */
    .post {
      border-bottom: 1px solid var(--light-gray);
      padding: 12px 16px;
    }
    
    .post-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
    }
    
    .post-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .post-author {
      flex: 1;
    }
    
    .author-name {
      font-weight: 600;
      font-size: 14px;
    }
    
    .post-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .post-menu {
      color: var(--gray);
      cursor: pointer;
    }
    
    .post-content {
      margin-bottom: 10px;
    }
    
    .post-text {
      font-size: 15px;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    
    .post-image {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    .post-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
    
    .post-actions {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
    }
    
    .post-action {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--gray);
      font-size: 14px;
      cursor: pointer;
    }
    
    .post-action.active {
      color: var(--secondary);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--light-gray);
      color: var(--dark);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      color: var(--dark);
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 主题1样式 */
    .theme1 {
      --primary: var(--theme1-primary);
      background-color: var(--theme1-bg);
    }
    
    .theme1 .navbar {
      background-color: white;
    }
    
    /* 主题2样式 */
    .theme2 {
      --primary: var(--theme2-primary);
      background-color: var(--theme2-bg);
    }
    
    .theme2 .navbar {
      background-color: white;
    }
    
    /* 主题3样式 */
    .theme3 {
      --primary: var(--theme3-primary);
      background-color: var(--theme3-bg);
    }
    
    .theme3 .navbar {
      background-color: white;
    }
    
    /* 主题4样式 */
    .theme4 {
      --primary: var(--theme4-primary);
      background-color: var(--theme4-bg);
    }
    
    .theme4 .navbar {
      background-color: white;
    }
    
    /* 主题5样式 */
    .theme5 {
      --primary: var(--theme5-primary);
      background-color: var(--theme5-bg);
    }
    
    .theme5 .navbar {
      background-color: white;
    }
    
    /* 主题6深色样式 */
    .theme6 {
      --primary: var(--theme6-primary);
      --dark: white;
      --light: #111827;
      --light-gray: #374151;
      --white: #1F2937;
      background-color: var(--theme6-bg);
    }
    
    .theme6 .navbar,
    .theme6 .bottom-nav {
      background-color: var(--theme6-primary);
      border-color: #374151;
    }
    
    .theme6 .logo,
    .theme6 .nav-icon,
    .theme6 .bottom-nav-item,
    .theme6 .story-name,
    .theme6 .author-name,
    .theme6 .post-text,
    .theme6 .post-action {
      color: white;
    }
    
    /* 特色组件 */
    .search-bar {
      padding: 10px 16px;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 16px;
      border-radius: 24px;
      border: 1px solid var(--light-gray);
      background-color: var(--light);
      font-size: 14px;
      outline: none;
    }
    
    .search-input:focus {
      border-color: var(--primary);
    }
    
    .categories {
      padding: 12px 16px;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid var(--light-gray);
    }
    
    .categories::-webkit-scrollbar {
      display: none;
    }
    
    .category {
      padding: 6px 14px;
      background-color: var(--light);
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .category.active {
      background-color: var(--primary);
      color: white;
    }
    
    .suggested {
      padding: 16px;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    
    .suggested-users {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 8px;
    }
    
    .suggested-users::-webkit-scrollbar {
      display: none;
    }
    
    .suggested-user {
      min-width: 100px;
      text-align: center;
    }
    
    .suggested-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 8px;
    }
    
    .suggested-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .suggested-name {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .add-friend {
      font-size: 12px;
      color: var(--primary);
      font-weight: 600;
      cursor: pointer;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .logo {
        font-size: 18px;
      }
      
      .nav-icon {
        font-size: 18px;
      }
      
      .post-text {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">首页样式</div>
    <div class="switcher-option active" data-style="1">简约社交风</div>
    <div class="switcher-option" data-style="2">活力社交风</div>
    <div class="switcher-option" data-style="3">资讯社交风</div>
    <div class="switcher-option" data-style="4">社区社交风</div>
    <div class="switcher-option" data-style="5">生活分享风</div>
    <div class="switcher-option" data-style="6">深色主题风</div>
  </div>
  
  <div class="container">
    <!-- 1. 简约社交风 -->
    <div class="home-page active theme1" id="style1">
      <div class="navbar">
        <div class="logo">Social</div>
        <div class="nav-icons">
          <div class="nav-icon">
            <i class="fa fa-paper-plane-o"></i>
          </div>
          <div class="nav-icon">
            <i class="fa fa-bell-o"></i>
            <span class="nav-badge">3</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="stories">
          <div class="story">
            <div class="story-avatar add">
              <i class="fa fa-plus"></i>
            </div>
            <div class="story-name">添加故事</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/64/200" alt="用户头像">
            </div>
            <div class="story-name">张三</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/65/200" alt="用户头像">
            </div>
            <div class="story-name">李四</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/66/200" alt="用户头像">
            </div>
            <div class="story-name">王五</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/67/200" alt="用户头像">
            </div>
            <div class="story-name">赵六</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/68/200" alt="用户头像">
            </div>
            <div class="story-name">孙七</div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/64/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">张三</div>
              <div class="post-time">今天 10:23</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">今天天气真好，和朋友一起去公园散步，享受阳光和新鲜空气！#周末生活 #户外</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/29/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>24</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>8</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>3</span>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/65/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">李四</div>
              <div class="post-time">昨天 18:45</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">分享一下我新做的晚餐，意大利面配自制番茄酱，味道还不错！#美食 #家常菜</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/431/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>56</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>12</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>5</span>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/66/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">王五</div>
              <div class="post-time">昨天 14:30</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">刚刚完成了人生第一个马拉松！虽然很累，但成就感满满！#运动 #马拉松 #挑战自我</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/1058/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>128</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>36</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>24</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <div class="bottom-nav-item active">
          <div class="bottom-nav-icon">
            <i class="fa fa-home"></i>
          </div>
          <div>首页</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-compass"></i>
          </div>
          <div>发现</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-plus-square-o"></i>
          </div>
          <div>发布</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-user-o"></i>
          </div>
          <div>我的</div>
        </div>
      </div>
    </div>
    
    <!-- 2. 活力社交风 -->
    <div class="home-page theme2" id="style2">
      <div class="navbar">
        <div class="logo">Vibe</div>
        <div class="nav-icons">
          <div class="nav-icon">
            <i class="fa fa-search"></i>
          </div>
          <div class="nav-icon">
            <i class="fa fa-envelope-o"></i>
            <span class="nav-badge">5</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="stories">
          <div class="story">
            <div class="story-avatar add">
              <i class="fa fa-plus"></i>
            </div>
            <div class="story-name">新建</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/91/200" alt="用户头像">
            </div>
            <div class="story-name">莉莉</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/92/200" alt="用户头像">
            </div>
            <div class="story-name">小明</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/93/200" alt="用户头像">
            </div>
            <div class="story-name">小红</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/94/200" alt="用户头像">
            </div>
            <div class="story-name">小刚</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/95/200" alt="用户头像">
            </div>
            <div class="story-name">小美</div>
          </div>
        </div>
        
        <div class="categories">
          <div class="category active">推荐</div>
          <div class="category">热门</div>
          <div class="category">音乐</div>
          <div class="category">影视</div>
          <div class="category">游戏</div>
          <div class="category">美食</div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/91/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">莉莉</div>
              <div class="post-time">2小时前</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-v"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">昨晚的演唱会太燃了！现场气氛超级棒，主唱的声音太有感染力了！#音乐 #演唱会 #现场</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/1082/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>156</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>42</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share-alt"></i>
              <span>18</span>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/92/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">小明</div>
              <div class="post-time">5小时前</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-v"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">新入手的游戏太好玩了，画面精美，剧情也很吸引人，强烈推荐给大家！#游戏 #推荐 #新游戏</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/169/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>89</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>23</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share-alt"></i>
              <span>9</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <div class="bottom-nav-item active">
          <div class="bottom-nav-icon">
            <i class="fa fa-home"></i>
          </div>
          <div>首页</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-compass"></i>
          </div>
          <div>探索</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-plus-circle"></i>
          </div>
          <div>创作</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-user"></i>
          </div>
          <div>我的</div>
        </div>
      </div>
    </div>
    
    <!-- 3. 资讯社交风 -->
    <div class="home-page theme3" id="style3">
      <div class="navbar">
        <div class="logo">NewsFeed</div>
        <div class="nav-icons">
          <div class="nav-icon">
            <i class="fa fa-bell-o"></i>
          </div>
          <div class="nav-icon">
            <i class="fa fa-user-circle-o"></i>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="search-bar">
          <input type="text" class="search-input" placeholder="搜索新闻、话题或好友...">
        </div>
        
        <div class="categories">
          <div class="category active">全部</div>
          <div class="category">科技</div>
          <div class="category">财经</div>
          <div class="category">娱乐</div>
          <div class="category">体育</div>
          <div class="category">健康</div>
          <div class="category">国际</div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/177/200" alt="媒体头像">
            </div>
            <div class="post-author">
              <div class="author-name">科技日报</div>
              <div class="post-time">今天 08:30</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">最新研究显示，人工智能技术在医疗诊断领域取得重大突破，准确率超过人类医生平均水平。专家表示，这将彻底改变未来医疗行业的格局。#人工智能 #医疗科技 #科技创新</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/1/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-thumbs-up"></i>
              <span>342</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>89</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>156</span>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/178/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">张教授</div>
              <div class="post-time">今天 07:15</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">对于这项新技术，我们既要看到其潜力，也要警惕可能带来的伦理问题。如何平衡技术进步与人类福祉，是我们需要深入思考的问题。#科技伦理 #人工智能伦理</div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-thumbs-up"></i>
              <span>128</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>56</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>42</span>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/179/200" alt="媒体头像">
            </div>
            <div class="post-author">
              <div class="author-name">体育周报</div>
              <div class="post-time">昨天 22:15</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">昨晚进行的全国篮球联赛总决赛中，卫冕冠军以一分之差险胜对手，成功卫冕。这场比赛被誉为近年来最精彩的总决赛之一。#篮球 #体育赛事 #总决赛</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/1058/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-thumbs-up"></i>
              <span>567</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>234</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>321</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <div class="bottom-nav-item active">
          <div class="bottom-nav-icon">
            <i class="fa fa-home"></i>
          </div>
          <div>首页</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-newspaper-o"></i>
          </div>
          <div>资讯</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-comment"></i>
          </div>
          <div>讨论</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-user-o"></i>
          </div>
          <div>我的</div>
        </div>
      </div>
    </div>
    
    <!-- 4. 社区社交风 -->
    <div class="home-page theme4" id="style4">
      <div class="navbar">
        <div class="logo">Community</div>
        <div class="nav-icons">
          <div class="nav-icon">
            <i class="fa fa-bell"></i>
            <span class="nav-badge">2</span>
          </div>
          <div class="nav-icon">
            <i class="fa fa-cog"></i>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="suggested">
          <div class="section-title">推荐社区</div>
          <div class="categories">
            <div class="category active">全部</div>
            <div class="category">学习</div>
            <div class="category">职场</div>
            <div class="category">兴趣</div>
            <div class="category">生活</div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/237/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">程序员小王</div>
              <div class="post-time">今天 09:45</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">分享一个自己整理的前端学习资源汇总，包含HTML、CSS、JavaScript等基础知识和高级技巧，希望对刚入门的同学有帮助。#前端开发 #学习资源 #编程</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/0/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-thumbs-up"></i>
              <span>215</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>67</span>
            </div>
            <div class="post-action">
              <i class="fa fa-bookmark-o"></i>
              <span>108</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
            </div>
          </div>
        </div>
        
        <div class="suggested">
          <div class="section-title">你可能感兴趣的人</div>
          <div class="suggested-users">
            <div class="suggested-user">
              <div class="suggested-avatar">
                <img src="https://picsum.photos/id/238/200" alt="用户头像">
              </div>
              <div class="suggested-name">设计师小李</div>
              <div class="add-friend">关注</div>
            </div>
            <div class="suggested-user">
              <div class="suggested-avatar">
                <img src="https://picsum.photos/id/239/200" alt="用户头像">
              </div>
              <div class="suggested-name">产品经理小张</div>
              <div class="add-friend">关注</div>
            </div>
            <div class="suggested-user">
              <div class="suggested-avatar">
                <img src="https://picsum.photos/id/240/200" alt="用户头像">
              </div>
              <div class="suggested-name">后端开发老刘</div>
              <div class="add-friend">关注</div>
            </div>
            <div class="suggested-user">
              <div class="suggested-avatar">
                <img src="https://picsum.photos/id/241/200" alt="用户头像">
              </div>
              <div class="suggested-name">数据分析师小陈</div>
              <div class="add-friend">关注</div>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/242/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">职场导师</div>
              <div class="post-time">昨天 16:30</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">给职场新人的5个建议：
1. 主动学习，不要等别人来教
2. 不懂就问，但先尝试自己解决
3. 建立良好的人际关系
4. 定期总结反思
5. 保持工作与生活的平衡

#职场 #新人 #建议</div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-thumbs-up"></i>
              <span>342</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>98</span>
            </div>
            <div class="post-action">
              <i class="fa fa-bookmark-o"></i>
              <span>156</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <div class="bottom-nav-item active">
          <div class="bottom-nav-icon">
            <i class="fa fa-home"></i>
          </div>
          <div>首页</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-users"></i>
          </div>
          <div>社区</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-pencil"></i>
          </div>
          <div>发帖</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-user"></i>
          </div>
          <div>我的</div>
        </div>
      </div>
    </div>
    
    <!-- 5. 生活分享风 -->
    <div class="home-page theme5" id="style5">
      <div class="navbar">
        <div class="logo">LifeShare</div>
        <div class="nav-icons">
          <div class="nav-icon">
            <i class="fa fa-search"></i>
          </div>
          <div class="nav-icon">
            <i class="fa fa-bell"></i>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="stories">
          <div class="story">
            <div class="story-avatar add">
              <i class="fa fa-plus"></i>
            </div>
            <div class="story-name">添加</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/334/200" alt="用户头像">
            </div>
            <div class="story-name">旅行博主</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/335/200" alt="用户头像">
            </div>
            <div class="story-name">美食家</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/336/200" alt="用户头像">
            </div>
            <div class="story-name">摄影师</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/337/200" alt="用户头像">
            </div>
            <div class="story-name">健身达人</div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/334/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">旅行博主</div>
              <div class="post-time">3小时前</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">分享一组清晨的海边照片，日出时分的景色真的太美了，大自然的馈赠总是让人惊叹。#旅行 #海边 #日出</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/1015/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>456</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>78</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>65</span>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/335/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">美食家</div>
              <div class="post-time">昨天 19:20</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">今天尝试做了一道法式甜点，虽然过程有点复杂，但成品味道很不错！分享给大家，周末可以试试看。#美食 #烘焙 #甜点</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/292/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>321</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>94</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>43</span>
            </div>
          </div>
        </div>
        
        <div class="suggested">
          <div class="section-title">热门话题</div>
          <div class="categories">
            <div class="category">#周末去哪儿</div>
            <div class="category">#美食分享</div>
            <div class="category">#生活技巧</div>
            <div class="category">#摄影作品</div>
            <div class="category">#健身打卡</div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/337/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">健身达人</div>
              <div class="post-time">2天前</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">坚持健身三个月的成果，体脂率从25%降到18%，不仅身材变好了，精神状态也明显改善。分享给正在健身的朋友们，坚持就是胜利！#健身 #成果 #坚持</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/176/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>678</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>124</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>98</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <div class="bottom-nav-item active">
          <div class="bottom-nav-icon">
            <i class="fa fa-home"></i>
          </div>
          <div>首页</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-compass"></i>
          </div>
          <div>发现</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-camera"></i>
          </div>
          <div>拍摄</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-user"></i>
          </div>
          <div>我的</div>
        </div>
      </div>
    </div>
    
    <!-- 6. 深色主题风 -->
    <div class="home-page theme6" id="style6">
      <div class="navbar">
        <div class="logo">NightSocial</div>
        <div class="nav-icons">
          <div class="nav-icon">
            <i class="fa fa-search"></i>
          </div>
          <div class="nav-icon">
            <i class="fa fa-bell-o"></i>
            <span class="nav-badge">4</span>
          </div>
        </div>
      </div>
      
      <div class="content">
        <div class="stories">
          <div class="story">
            <div class="story-avatar add">
              <i class="fa fa-plus"></i>
            </div>
            <div class="story-name">创建</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/433/200" alt="用户头像">
            </div>
            <div class="story-name">电影迷</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/434/200" alt="用户头像">
            </div>
            <div class="story-name">音乐控</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/435/200" alt="用户头像">
            </div>
            <div class="story-name">游戏玩家</div>
          </div>
          <div class="story">
            <div class="story-avatar">
              <img src="https://picsum.photos/id/436/200" alt="用户头像">
            </div>
            <div class="story-name">阅读者</div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/433/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">电影迷</div>
              <div class="post-time">今天 11:30</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">昨晚看了一部非常棒的科幻电影，特效震撼，剧情也很有深度，探讨了人工智能与人类的关系。强烈推荐给大家！#电影推荐 #科幻 #人工智能</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/1050/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>189</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>45</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>32</span>
            </div>
          </div>
        </div>
        
        <div class="post">
          <div class="post-header">
            <div class="post-avatar">
              <img src="https://picsum.photos/id/434/200" alt="用户头像">
            </div>
            <div class="post-author">
              <div class="author-name">音乐控</div>
              <div class="post-time">昨天 20:15</div>
            </div>
            <div class="post-menu">
              <i class="fa fa-ellipsis-h"></i>
            </div>
          </div>
          <div class="post-content">
            <div class="post-text">新专辑循环播放中，这张专辑的制作水准太高了，每首歌都有独特的风格，强烈推荐大家去听！#音乐 #新专辑 #推荐</div>
            <div class="post-image">
              <img src="https://picsum.photos/id/1074/600/400" alt="帖子图片">
            </div>
          </div>
          <div class="post-actions">
            <div class="post-action active">
              <i class="fa fa-heart"></i>
              <span>231</span>
            </div>
            <div class="post-action">
              <i class="fa fa-comment-o"></i>
              <span>56</span>
            </div>
            <div class="post-action">
              <i class="fa fa-share"></i>
              <span>47</span>
            </div>
          </div>
        </div>
        
        <div class="suggested">
          <div class="section-title">推荐关注</div>
          <div class="suggested-users">
            <div class="suggested-user">
              <div class="suggested-avatar">
                <img src="https://picsum.photos/id/437/200" alt="用户头像">
              </div>
              <div class="suggested-name">影评人</div>
              <div class="add-friend">关注</div>
            </div>
            <div class="suggested-user">
              <div class="suggested-avatar">
                <img src="https://picsum.photos/id/438/200" alt="用户头像">
              </div>
              <div class="suggested-name">音乐人</div>
              <div class="add-friend">关注</div>
            </div>
            <div class="suggested-user">
              <div class="suggested-avatar">
                <img src="https://picsum.photos/id/439/200" alt="用户头像">
              </div>
              <div class="suggested-name">作家</div>
              <div class="add-friend">关注</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bottom-nav">
        <div class="bottom-nav-item active">
          <div class="bottom-nav-icon">
            <i class="fa fa-home"></i>
          </div>
          <div>首页</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-compass"></i>
          </div>
          <div>探索</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-plus-square-o"></i>
          </div>
          <div>发布</div>
        </div>
        <div class="bottom-nav-item">
          <div class="bottom-nav-icon">
            <i class="fa fa-user-o"></i>
          </div>
          <div>我的</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的样式
    let currentStyle = '1';
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const homePages = {
      '1': document.getElementById('style1'),
      '2': document.getElementById('style2'),
      '3': document.getElementById('style3'),
      '4': document.getElementById('style4'),
      '5': document.getElementById('style5'),
      '6': document.getElementById('style6')
    };
    
    // 切换首页样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(homePages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中的样式
      if (homePages[style]) {
        homePages[style].classList.add('active');
        currentStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchStyle(style);
      });
    });
    
    // 帖子点赞交互
    document.querySelectorAll('.post-action').forEach(action => {
      if (action.querySelector('.fa-heart') || action.querySelector('.fa-thumbs-up')) {
        action.addEventListener('click', function() {
          this.classList.toggle('active');
          const countEl = this.querySelector('span');
          if (countEl) {
            let count = parseInt(countEl.textContent);
            if (this.classList.contains('active')) {
              countEl.textContent = count + 1;
            } else {
              countEl.textContent = count - 1;
            }
          }
        });
      }
    });
    
    // 分类切换交互
    document.querySelectorAll('.category').forEach(category => {
      category.addEventListener('click', function() {
        // 获取同组的所有分类
        const parent = this.parentElement;
        parent.querySelectorAll('.category').forEach(cat => {
          cat.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 关注按钮交互
    document.querySelectorAll('.add-friend').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.textContent === '关注') {
          this.textContent = '已关注';
          this.style.color = 'var(--success)';
        } else {
          this.textContent = '关注';
          this.style.color = 'var(--primary)';
        }
      });
    });
    
    // 底部导航切换
    document.querySelectorAll('.bottom-nav-item').forEach(item => {
      item.addEventListener('click', function() {
        // 获取同组的所有导航项
        const parent = this.parentElement;
        parent.querySelectorAll('.bottom-nav-item').forEach(navItem => {
          navItem.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
  </script>
</body>
</html>
